// 使用但文件组件，实现评论列表
import React from 'react';

// 自定义组件
import _ from 'lodash';
import { CommentCount } from './components/CommentCount';
import { Tabs } from './components/Tabs';
import { Forms } from './components/Forms';
import { CommentList } from './components/CommentList';

import './App.css'; // 导入样式

const BListKEY = 'B-list';

export class App extends React.Component {
  // constructor 定义
  constructor() {
    super();

    // localStorage.setItem(BListKEY, JSON.stringify([{xxxx}]))
    const list = JSON.parse(localStorage.getItem(BListKEY) || '[]');
    this.state = {
      list: list,
      // hot: 热度排序  time: 时间排序
      tabs: [
        {
          id: 1,
          name: '热度',
          type: 'hot',
        },
        {
          id: 2,
          name: '时间',
          type: 'time',
        },
      ],
      active: 'hot',
      // list: [],
    };
    // this.setState({
    //   list: list,
    // });
  }
  // 组件的状态
  // state = {
  //   // hot: 热度排序  time: 时间排序
  //   tabs: [
  //     {
  //       id: 1,
  //       name: '热度',
  //       type: 'hot',
  //     },
  //     {
  //       id: 2,
  //       name: '时间',
  //       type: 'time',
  //     },
  //   ],
  //   active: 'hot',
  //   list: [],
  // };

  // 读取本地评论列表数据
  componentDidMount() {
    // const list = JSON.parse(localStorage.getItem(BListKEY) || '[]');
    // this.setState({
    //   list: list,
    // });
  }

  // 存储列表数据到本地
  componentDidUpdate() {
    console.log('=====');
    localStorage.setItem(BListKEY, JSON.stringify(this.state.list));
  }

  // 发表评论
  handleAddComment = (txt) => {
    console.log(txt);
    // 组装一个评论
    const comment = {
      id: Math.random(),
      author: '徐帅',
      comment: txt,
      time: new Date(),
      attitude: 0,
    };
    // 将评论放到 list 中去
    // this.state.list.unshift(comment);
    this.setState({
      list: [comment, ...this.state.list],
    });

    // // 把焦点设置到评论输入框
    // this.txtRef.current.focus();
  };

  // 删除评论按钮
  delComment = (e, id) => {
    console.log(e);
    console.log(id);
    // 操作数组，根据id，删除对应元素。
    // filter 过滤数组
    const newList = this.state.list.filter((item) => item.id !== id);
    this.setState({
      list: newList,
    });
  };

  // 点赞或踩
  changeAttitude = (id, attitude) => {
    console.log(id, attitude);
    // 修改元素组，不增加也不减少
    const newList = this.state.list.map((item) => {
      // 找到你点赞或踩的那一条评论
      if (item.id === id) {
        // item.attitude = attitude;
        // return item;
        return {
          ...item,
          // attitude: attitude
          attitude,
        };
      }
      return item;
    });
    // 触发页面更新
    this.setState({
      list: newList,
    });
  };

  // 评论排序
  changeSortType = (type) => {
    console.log(type);
    // 排序数组
    if (type === 'hot') {
      const newList2 = _.sortBy(this.state.list, ['id']);
      console.log(newList2);
      // 按时间戳，倒序，越大（最新的评论）在前面
      const newList = this.state.list.sort((item1, item2) => {
        // 按时间倒序
        return item2.time.getTime() - item1.time.getTime();
      });

      // 刷新页面
      this.setState({
        list: newList2,
        active: type,
      });
    } else {
      // 按时间戳，升序，越小（越旧的评论）在前面
      const newList = this.state.list.sort((item1, item2) => {
        // 按时间倒序
        return item1.time.getTime() - item2.time.getTime();
      });

      // 刷新页面
      this.setState({
        list: newList,
        active: type,
      });
    }
  };

  // 组件UI
  render() {
    // return 后边必须是一个 React 元素、其实就是虚拟DOM对象
    return (
      <div className="comment-root">
        <div className="comment-container">
          {/* 评论数 */}
          <CommentCount count={this.state.list.length} />

          {/* 排序tab */}
          <Tabs
            tabs={this.state.tabs}
            active={this.state.active}
            changeSortType={this.changeSortType}
          />

          {/* 发表评论区 */}
          <Forms handleAddComment={this.handleAddComment} />

          {/* 评论列表区 */}
          <CommentList
            list={this.state.list}
            changeAttitude={this.changeAttitude}
            delComment={this.delComment}
          />
        </div>
      </div>
    );
  }
}

// export default App;
